import type {Config} from "@measured/puck";
import {Data, Puck} from "@measured/puck";
import "@measured/puck/puck.css";
import "./index.css"
import {ReactNode} from "react";
import {MdOutlineDragIndicator} from "react-icons/md";

const ViewEdit = () => {
    // Create Puck component config
    const config: Config = {
        components: {
            HeadingBlock: {
                defaultProps: {text: "Hello, world"},
                fields: {
                    text: {
                        type: "text",
                    },
                },
                render: ({text}) => {
                    return <div style={{height: 100, color: "white", fontSize: 32}}>
                        {text}
                    </div>;
                },
            },
        },
    };

    const initialData = {};

    const publish = (data: Data) => {
        console.log("data: ", data)
    };

    return (
        <div>
            <Puck config={config}
                  data={initialData}
                  onPublish={publish} headerTitle={"测试标题"} overrides={{
                componentItem: (v: {
                    children: ReactNode;
                    name: string;
                }) => (
                    <div className={"bg-black p-4 text-white text-[14px] rounded-[4px] flex flex-row items-center justify-between"}>
                        {v.name}
                        <MdOutlineDragIndicator size={20}/>
                    </div>
                )
            }}/>
        </div>
    );
};

export default ViewEdit;
